import { useRef } from 'react';
import IatRecorder from '@/utils/iatRecorder';
import { Button, Input, Tooltip, message } from 'antd';
import AsrRecorder from '@/utils/asrBroadcast';

const Recorder = ({ loading, handleIsRecorder, handleUserInput, onSubmit, updateTempMsg, handleIsTempMsg }) => {
  const recorderStart = useRef(null);
  const recorderStop = useRef(null);
  const soundWave = useRef(null);
  // @ts-ignore
  const iatRecorder = new IatRecorder({
    onWillStatusChange: (status, oldstatus) => {
      console.log(iatRecorder);
      console.log({ status });
      console.log({ oldstatus });
      if (status === 'end') {
        recorderStart.current.style.display = 'block';
        recorderStop.current.style.display = 'none';
        soundWave.current.style.display = 'none';
        handleIsRecorder(false);
        handleIsTempMsg(false);
        // debugger;
        if (iatRecorder.resultText /* && iatRecorder.flag */) {
          /* setUserInput(() => iatRecorder.resultText); */
          handleUserInput(iatRecorder.resultText);
          onSubmit(iatRecorder.resultText);
          handleUserInput('');
        }
      }
      if (status === 'init') {
        /* setRecorderFlag(()=>true)  */
        /*用useState更新视图会导致录音录不上改为手动操作dom更新视图 */
        recorderStart.current.style.display = 'none';
        recorderStop.current.style.display = 'block';
        soundWave.current.style.display = 'flex';
        handleIsRecorder(true);
      }
    },
    onWillResultTextTemp: (newValue: any) => {
      /* setUserInput(() => newValue); */
      console.log(newValue);
      updateTempMsg(newValue);
      if (iatRecorder.status != 'end') {
        handleIsTempMsg(true);
      }
    },
  });
  // @ts-ignore
  const asrRecorder = new AsrRecorder({
    onWillStatusChange: (status, oldstatus) => {
      console.log(iatRecorder);
      console.log({ status });
      console.log({ oldstatus });
      if (status === 'end') {
        recorderStart.current.style.display = 'block';
        recorderStop.current.style.display = 'none';
        soundWave.current.style.display = 'none';
        handleIsRecorder(false);
        handleIsTempMsg(false);
        // debugger;
        if (iatRecorder.resultText /* && iatRecorder.flag */) {
          /* setUserInput(() => iatRecorder.resultText); */
          handleUserInput(iatRecorder.resultText);
          onSubmit(iatRecorder.resultText);
          handleUserInput('');
        }
      }
      if (status === 'init') {
        /* setRecorderFlag(()=>true)  */
        /*用useState更新视图会导致录音录不上改为手动操作dom更新视图 */
        recorderStart.current.style.display = 'none';
        recorderStop.current.style.display = 'block';
        soundWave.current.style.display = 'flex';
        handleIsRecorder(true);
      }
    },
    onWillResultTextTemp: (newValue: any) => {
      /* setUserInput(() => newValue); */
      console.log(newValue);
      updateTempMsg(newValue);
      if (iatRecorder.status != 'end') {
        handleIsTempMsg(true);
      }
    },
  });
  const start = () => {
    if (!loading) {
      iatRecorder.start();
      /* asrRecorder.start(); */
    } else {
      message.error('录音打开失败正在请求数据中');
    }
  };

  const stop = () => {
    if (!loading) {
      iatRecorder.stop();
      /* asrRecorder.stop(); */
    } else {
      message.error('录音打开失败正在请求数据中');
    }
  };
  // TODO: 修改输入框样式
  return (
    <div className="flex sendMeesge">
      <div className="soundWave" ref={soundWave} id="soundWave" style={{ display: 'none' }}>
        <span style={{ animation: 'stretch 1s linear infinite alternate forwards' }}></span>
        <span style={{ animation: 'stretch 1s 0.5s linear infinite alternate forwards' }}></span>
        <span style={{ animation: 'stretch 1s 1s linear infinite alternate forwards' }}></span>
        <span style={{ animation: 'stretch 1s linear infinite alternate forwards' }}></span>
        <span style={{ animation: 'stretch 1s 0.5s linear infinite alternate forwards' }}></span>
        <span style={{ animation: 'stretch 1s 1s linear infinite alternate forwards' }}></span>
        <span style={{ animation: 'stretch 1s linear infinite alternate forwards' }}></span>
        <span style={{ animation: 'stretch 1s 0.5s linear infinite alternate forwards' }}></span>
        <span style={{ animation: 'stretch 1s 1s linear infinite alternate forwards' }}></span>
      </div>
      <Tooltip placement="left" title="点击说话" arrow={true} defaultOpen={true} color="#486180" overlayClassName="myTooltip">
        <img
          onClick={start}
          className="recorder"
          ref={recorderStart}
          set-status="start"
          src="../recorderStart.png"
          alt=""
          style={{ width: 'calc(23.75vw * var(--w))', height: 'calc(30vh * var(--h))' }}
        />
        <img
          onClick={stop}
          className="recorder"
          ref={recorderStop}
          set-status="stop"
          src="../recorderIng.png"
          alt=""
          style={{ width: 'calc(30vw * var(--w))', height: 'calc(30vh * var(--h))', display: 'none' }}
        />
      </Tooltip>
    </div>
  );
};

export default Recorder;
